import React, { Component } from "react";
import { Input, Select, Button } from "antd";
import styles from "./TopSelect.less";

class TopSelect extends Component {
  channelName = React.createRef();

  state = {
    picVisible: false,
    defaultText: "渠道类型"
  };

  changePicVisible = () => {
    const { picVisible } = this.state;
    this.setState({
      picVisible: !picVisible
    });
  };

  /**
   * @function 选择渠道类型
   * */
  chooseChannelType = (des, value) => {
    this.setState({
      picVisible: false,
      defaultText: des
    });
    this.props.chooseChannelType(value || "");
  };

  onSearch = () => {
    const { changeChannelName } = this.props;
    changeChannelName(this.channelName.current.state.value);
  };

  handleTypeChange = value => {
    this.props.chooseChannelType(value || "");
  };

  handleStateChange = value => {
    this.props.chooseUseStatus(value);
  };

  render() {
    // const { picVisible, defaultText } = this.state;
    const { channelTypeList } = this.props;
    // const content = (
    //   <div>
    //     {channelTypeList.map(({ des, value }) => (
    //       <div
    //         className={styles.chooseChannelType}
    //         key={`${value}-${des}`}
    //         onClick={() => this.chooseChannelType(des, value)}
    //       >
    //         {des}
    //       </div>
    //     ))}
    //   </div>
    // );
    return (
      <div className={styles.root}>
        <div className={styles.text}>
          <Select
            placeholder="渠道类型"
            allowClear
            style={{ width: 120 }}
            onChange={value => this.handleTypeChange(value)}
          >
            {channelTypeList.map(({ value, des }) => (
              <Select.Option key={`${value}-${des}`} value={value}>
                {des}
              </Select.Option>
            ))}
          </Select>
          <Select
            placeholder="启用状态"
            allowClear
            style={{ width: 120 }}
            onChange={value => this.handleStateChange(value)}
          >
            <Select.Option value={1}>启用</Select.Option>
            <Select.Option value={0}>停用</Select.Option>
          </Select>
        </div>
        <div className={styles.search}>
          {/* <Input
            allowClear
            ref={this.channelCode}
            style={{ marginRight: 10, width: 160 }}
            placeholder="请输入渠道编号"
          /> */}
          <Input
            allowClear
            ref={this.channelName}
            style={{ marginRight: 10, width: 216 }}
            placeholder="请输入渠道名称或编码"
          />
          <Button
            style={{ width: 56 }}
            type="primary"
            onClick={() => this.onSearch()}
          >
            搜索
          </Button>
        </div>
        {/* <Search
          className={styles.search}
          placeholder="渠道名称"
          enterButton="搜索"
          // onChange={e => changeChannelName(e.target.value)}
          onSearch={this.onSearch}
        />

        <div className={styles.text}>
          <Popover
            placement="bottomRight"
            content={content}
            visible={picVisible}
            trigger="click"
          >
            <span style={{ cursor: "pointer" }} onClick={this.changePicVisible}>
              {defaultText}
              <Icon type={picVisible ? "up" : "down"} />
            </span>
          </Popover>
        </div> */}
      </div>
    );
  }
}

export default TopSelect;

// const channelTypeList = [
//   "全部",
//   "政务微信",
//   "app",
//   "网页客户端",
//   "短信",
//   "邮件",
//   "钉钉端",
//   "钉钉"
// ];
